<!-- 模块说明 -->
<template>
    <div class="big">
        <router-link to="/search">
            <div>
                <van-search placeholder="请输入书名/isbn搜索" shape="round" input-align="center" />
            </div>
        </router-link>
        <!-- 每日好书 -->
        <div class="nav">
            <b>每日好书</b>
            <span @click="more">更多</span>
        </div>
        <div class="shu">
            <div v-for="item in home">
                <router-link :to="'/details/' + item.idbook">
                    <img :src="item.bimg" alt="">
                    <p>{{ item.bname }}</p>
                </router-link>
            </div>
        </div>
        <!-- 月畅销 -->
        <div class="sale">
            <b>月畅销</b>
            <span @click="monthsale">更多</span>
        </div>
        <div class="shu1">
            <div v-for="item in mounth ">
                <router-link :to="'/sale/' + item.idbook">
                    <img src="../../img/summer.jpg" alt="">
                    <p>{{ item.bname }}</p>
                </router-link>
            </div>
        </div>
        <!-- 年畅销 -->
        <div class="sale">
            <b>年畅销</b>
            <span @click="yearsale">更多</span>
        </div>
        <div class="shu1">
            <div @click="book" v-for="item in year">
                <router-link to="">
                    <img src="../../img/summer.jpg" alt="">
                    <p> {{ item.bname }}</p>
                </router-link>
            </div>

        </div>
        <!-- 热门书单 -->
        <div class="hot">
            <b>热门书单</b>
        </div>
        <div class="box">
            <div v-for="item in hot">
                <router-link :to="'/hot/' + item.blId">
                    <div class=" big1">
                        <div class="tu">
                            <img src="../../img/summer.jpg" alt="">
                        </div>
                        <div class="Bg">
                            <div class="boxBg"></div>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { getHome, getMounth, getYeary, getHot } from './api';
const router = useRouter()
const route = useRoute()
//热门书单
const hot = ref([])
const setHot = () => {
    getHot().then(res => {
        hot.value = res.data.data
        // console.log(res, 'oo')
    })
}
//年销量
const year = ref([])
const setyear = () => {
    getYeary().then(res => {
        year.value = res.data.data
        // console.log(res, '年')
    })
}
//月销售
const mounth = ref([])
const setyuear = () => {
    getMounth().then(res => {
        mounth.value = res.data.data
        console.log(res, '月畅销')
    })
}
//渲染数据
const home = ref([])
const setHome = () => {
    getHome().then(res => {
        // console.log(res, "home")
        home.value = res.data.data
    })
}
//点击更多跳转
const yearsale = () => {
    router.push('/more')
}
const monthsale = () => {
    router.push('/more')
}
const more = () => {
    router.push('/more')
}
onMounted(() => {
    setHome()
    setyuear()
    setyear()
    setHot()
})

</script>

<style lang="scss" scoped>
.big {
    overflow: auto;
    font-size: 10px;

}


.box {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .tu {
        width: 50%;
        position: relative;
        display: flex;


        img {

            width: 100px;
            height: 150px;
            position: absolute;
            z-index: 1;
            left: 71px;
            top: 52px;
        }
    }
}

.Bg {
    background: url("../../img/summer.jpg") no-repeat;
    background-size: 100% 100%;
    border: 5px solid #fff;
    border-radius: 10px;
}

.boxBg {
    // margin-top: 10px;
    width: 172px;
    height: 200px;
    border-radius: 10px;
    background-size: 100% 100%;
    backdrop-filter: blur(8px);
}

.nav {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;

    b {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500 !important;
    }

    span {
        margin-right: 10px;
        font-size: 12px;
    }
}

.shu {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;


    >div {
        width: 33%;

        p {
            text-align: center;
        }
    }

    img {
        margin-top: 15px;
        height: 135px;
        width: 100px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-left: 5px;
        margin-right: 5px;
    }

}

.sale {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;


    b {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500 !important;


    }

    span {
        margin-right: 10px;
        font-size: 14px;
    }
}

.shu1 {
    display: flex;
    flex-wrap: wrap;

    >div {
        width: 33%;

        p {
            text-align: center;
        }
    }

    img {
        margin-top: 15px;
        height: 135px;
        width: 100px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-left: 5px;
        margin-right: 5px;
    }

}

.hot {
    font-size: 18px;
    margin-top: 10px;

    b {
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500 !important;

        // margin-top: 20px;
    }
}
</style>
